<template>
  <div class="_ehl_tabs">
    <div
      class="_ehl_left_arrow"
      v-if="showNextIcon === true && list.length > 0"
      title="向前一页"
      @click="leftTagsPageChange"
      ><i class="el-icon-d-arrow-left"></i>
    </div>
    <div
      class="_ehl_left_arrow"
      v-if="showNextIcon === true && list.length > 0"
      title="向前一步"
      @click="leftTags"
      ><i class="el-icon-arrow-left"></i>
    </div>
    <div class="_ehl_item_box" ref="barparent">
      <div
        :class="[
          '_ehl_item',
          cusTabClass,
          { _ehl_item_select: clickable && current % size === index },
        ]"
        :style="{ ...tagsWidthStyle, cursor: 'pointer' }"
        v-for="(item, index) in list.slice(
          0 + (page - 1) * size,
          size + (page - 1) * size,
        )"
        @click="itemClick(item, index)"
        :key="index"
      >
        <span class="cpt_single_ellipsis" :title="item[name_p]">{{ item[name_p] }}</span>
        <i
          v-if="showDelIcon"
          title="关闭"
          class="el-icon-error"
          @click.stop="delItem(item, index)"
        ></i>
      </div>
    </div>
    <div
      class="_ehl_left_arrow"
      v-if="showNextIcon === true && list.length > 0"
      title="向后一步"
      @click="rightTags"
      ><i class="el-icon-arrow-right"></i>
    </div>
    <div
      class="_ehl_left_arrow"
      v-if="showNextIcon === true && list.length > 0"
      title="向后一页"
      @click="rightTagsPageChange"
      ><i class="el-icon-d-arrow-right"></i>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    props: {
      value: { type: Array, default: () => [] },
      list: { type: Array, default: () => [] },
      //标签最小宽度
      minWidth: { type: Number, default: () => 100 },
      //标签最大宽度
      maxWidth: { type: Number, default: () => 150 },
      //标签切换图标是否显示
      showNextIcon: { type: Boolean, default: () => true },
      //标签删除图标是否显示
      showDelIcon: { type: Boolean, default: () => true },
      //是否可以点击高亮
      clickable: { type: Boolean, default: () => true },
      //节点自定义样式
      cusTabClass: { type: String, default: () => '' },
      //value的key映射
      prop: { type: Object, default: () => ({ name: 'name', id: 'id' }) },
    },
    data() {
      return {
        current: -1,
        page: 1,
        size: 0, //一页多少个
        name_p: this.prop.name,
        id_p: this.prop.id,
      }
    },
    watch: {
      list(val) {
        this.$emit('input', val)
        this.size = 0
        this.$nextTick(() => {
          this.size = parseInt(
            this.$refs.barparent.clientWidth /
              (this.minWidth > this.maxWidth ? this.maxWidth : this.minWidth + 10),
          )
        })
      },
    },
    computed: {
      tagsWidthStyle() {
        let tmp_min = this.minWidth
        let tmp_max = this.maxWidth
        if (this.minWidth > this.maxWidth) {
          tmp_min = tmp_max
        }
        return {
          'min-width': tmp_min + 'px',
          'max-width': tmp_max + 'px',
        }
      },
    },
    created() {
      //优先使用传进来的值，没有再使用配置传进来的
      if (this.value && this.value.length > 0) {
        this.list.clearAll()
        this.value.forEach(element => {
          this.list.push(element)
        })
      }
    },
    mounted() {
      this.calculateSize()
      window.addEventListener('resize', this.calculateSize, false)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.calculateSize, false)
    },
    activated() {
      this.calculateSize()
    },
    methods: {
      calculateSize() {
        this.size = 0
        this.$nextTick(() => {
          this.size = parseInt(
            this.$refs.barparent.clientWidth /
              (this.minWidth > this.maxWidth ? this.maxWidth : this.minWidth + 10),
          )
          this.activeItem(0)
          // console.log('tabs', this.$refs.barparent.clientWidth, this.size)
        })
      },
      itemClick(item, index) {
        if (this.clickable) {
          this.current = index + (this.page - 1) * this.size
          this.$emit('tab-click', this.list[this.current], this.current)
        }
      },
      delItem(item, index) {
        let index2 = index + (this.page - 1) * this.size
        if (index2 === this.current) {
          //关闭的是当前激活的
          if (this.current === this.list.length - 1) {
            //关闭的是最后一项
            --this.current
            // this.$emit('tab-del', tmp[0], --this.current)
          } else {
            //关闭的不是最后一项
            // this.$emit('tab-del', tmp[0], this.current)
          }
        } else if (index2 > this.current) {
          //关闭的是当前激活的之后
          // this.$emit('tab-del', tmp[0], this.current)
        } else {
          //关闭的是当前激活的之前
          --this.current
          // this.$emit('tab-del', tmp[0], --this.current)
        }
        if (this.current < 0) {
          this.current = 0
        }
        let tmp = this.list.splice(index2, 1)
        this.$emit('tab-del', tmp[0], this.current)
        this.activeItem(this.current)
        console.log(this.current)
      },
      activeItem(num) {
        this.current = num
        this.page = parseInt(this.current / this.size) + 1
        if (this.list.length > 0) {
          this.$emit('tab-click', this.list[this.current], this.current)
        }
      },
      leftTagsPageChange() {
        if (this.page > 1) {
          this.page--
          this.current = (this.page - 1) * this.size
        }
        this.$emit('tab-click', this.list[this.current], this.current)
      },
      leftTags() {
        if (this.current > 0) {
          this.current--
          this.page = parseInt(this.current / this.size) + 1
        }
        this.$emit('tab-click', this.list[this.current], this.current)
      },
      rightTags() {
        if (this.current < this.list.length - 1) {
          this.current++
          this.page = parseInt(this.current / this.size) + 1
        }
        this.$emit('tab-click', this.list[this.current], this.current)
      },
      rightTagsPageChange() {
        if (this.page < this.list.length / this.size) {
          this.page++
          this.current = (this.page - 1) * this.size
        }
        this.$emit('tab-click', this.list[this.current], this.current)
      },
    },
  }
</script>
